<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .sullivan-grid {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .sullivan-grid-item {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="grid" style="width: 300px;height: 300px;"> </div>
<script src="./jquery.js"></script>
<script>
    const grid = [
        [2, 3], [3, 4], [4, 5], [5, 6], [6, 7],
        [4, 6], [5, 5], [4, 4], [5, 4], [5, 5],
    ];
    const gridMap = [
        [[2, 3], `"main main" "main main" "sub-01 sub-02"`],
        [[3, 4], `"main main main" "main main main" "sub-01 sub-02 sub-03"`],
        [[4, 5], `"main main" "main main" "sub-01 sub-02"`],
        [[5, 6], `"main main" "main main" "sub-01 sub-02"`],
        [[6, 7], `"main main" "main main" "sub-01 sub-02"`],

        [[4, 6], `"main main" "main main" "sub-01 sub-02"`],
        [[5, 5], `"main main" "main main" "sub-01 sub-02"`],
        [[4, 4], `"main main" "main main" "sub-01 sub-02"`],
        [[5, 4], `"main main" "main main" "sub-01 sub-02"`],
        [[5, 5], `"main main" "main main" "sub-01 sub-02"`],
    ];

    function createGridByArray([row, col], array) {
        const className = `sullivan-grid sullivan-grid-${row}x${col}`;
        const rowStyle = `repeat(${row}, 1fr)`;
        const colStyle = `repeat(${col}, 1fr)`;
        const $grid = $(`<div class="${className}" style="display: grid;" ></div>`);
        let tempAreas = ``

        array.map((area, index) => {
            const $item = $(
                `<div class="sullivan-grid-item" style="grid-area: ${area}"></div>`
            );

            if (index % col || index === 0) {
                tempAreas += `${area} `
            } else {
                tempAreas += `" "${area} `
            }

            $grid.append($item);
        })

        console.log({
            "grid-template-rows": rowStyle,
            "grid-template-columns": colStyle,
            "grid-template-areas": `"${tempAreas}"`
        })
        $grid.css({
            "grid-template-rows": rowStyle,
            "grid-template-columns": colStyle,
            "grid-template-areas": `"${tempAreas}"`
        });

        return $grid;
    }

    $('#grid').append(createGridByArray([3, 2], ['main', 'main', 'main', 'main', 'sub-01', 'sub-02']))
</script>
</body>
</html>